<template>
  <div>
    <router-link :to="`/menu/vito?id=${props.data.id}&topic=${encodeURIComponent(props.data.topic)}`">
      <div class="layout">
        <div class="logo">
          <img :src="props.data.coverImage" alt="封面">
        </div>
        <div class="content">
          <div class="title">
            <div>标题：</div>
            <div class="title-content">{{ props.data.topic }}</div>
          </div>
          <div class="Time">
            <div>开始时间：</div>
            <div>{{ formatDate(props.data.startTime) }}</div>
          </div>
          <div class="Time">
            <div>结束时间：</div>
            <div>{{ formatDate(props.data.endTime) }}</div>
          </div>
          <div class="synopsis">
            <div class="synopsis-title">简介：</div>
            <div class="synopsis-content">{{ props.data.introduce }}</div>
          </div>
        </div>
      </div>
    </router-link>
    <div class="btn">
      <el-button v-if="props.data.rankingStatus === 0" size="small" link @click="handleEdit">修改</el-button>
      <el-button size="small" link @click="handleDelete">删除</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
// 定义 props 来接收父组件传递的数据
interface Vote {
  id: number;
  coverImage: string;
  endTime: string;
  introduce: string;
  rankingStatus: number;
  startTime: string;
  topic: string;
}

const props = defineProps<{
  data: Vote;
}>();

// 定义 emit 用于向父组件发送事件
const emit = defineEmits<{
  (event: 'deleteVote', id: number): void;
  (event: 'editVote', id: number): void;
}>();

// 时间格式化函数
const formatDate = (dateStr: string) => {
  const date = new Date(dateStr);
  return `${date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  }).replace(/\//g, '-')} ${date.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  })}`;
};

// 删除按钮点击事件处理
const handleDelete = () => {
  emit('deleteVote', props.data.id);
};

const handleEdit = () => {
  emit('editVote', props.data.id);
};
</script>

<style scoped lang="scss">
.layout {
  display: flex;
  font-size: 10px;
  height: 100px;
  width: 300px;
  border: 1px solid #ccc;

  .logo {
    img {
      width: 100px;
      height: 100px;
      transition: filter 0.3s;
    }
  }

  .content {
    margin-left: 10px;

    .title {
      display: flex;

      .title-content {
        font-weight: bold;
      }
    }

    .Time {
      display: flex;
    }

    .synopsis {
      display: flex;

      .synopsis-title {
        white-space: nowrap;
      }

      .synopsis-content {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
      }
    }
  }
}

//按钮样式
.btn {
  margin-top: -33px;
  margin-left: 232px;
}
</style>
